<!--我的头部-->
<template>
    <view class="my_info">
        <!-- 头像部分 -->
        <view class="head">
          <image class="head_image" :src="psersonUrl"></image>
        </view>
        <!-- 姓名及手机号 -->
        <view class="phone_name">
          <!-- 姓名 -->
          <view class="name">
            <text class="name_text">{{ nickName }}</text>
            <image
              v-if="gender === 2"
              class="name_type"
              src="../../../static/girl.png"
            ></image>
            <image
              v-if="gender === 1"
              class="name_type"
              src="../../../static/boy.png"
            ></image>
          </view>
          <!-- 电话号 -->
          <view class="phone">
            <text class="phone_text">{{ phoneNumber | getPhoneNum }}</text>
          </view>
        </view>
      </view>
</template>
<script>
export default {
  data() {
    return {
      // 从本地存储获取用户信息
      userInfo: uni.getStorageSync('userInfo') || {
        psersonUrl: '../../static/btn_waiter_sel.png',
        nickName: '未登录',
        gender: 0,
        phoneNumber: '暂未绑定'
      }
    }
  },
  computed: {
    // 计算属性，方便获取用户信息
    psersonUrl() {
      return this.userInfo.avatarUrl || '../../static/btn_waiter_sel.png'
    },
    nickName() {
      return this.userInfo.nickName || '未登录'
    },
    gender() {
      return this.userInfo.gender || 0
    },
    phoneNumber() {
      return this.userInfo.phoneNumber || '暂未绑定'
    }
  },
  created() {
    // 监听用户信息更新事件
    uni.$on('updateUserInfo', this.updateUserInfo)
  },
  methods: {
    // 更新用户信息
    updateUserInfo(userInfo) {
      this.userInfo = userInfo
      // 同步更新本地存储
      uni.setStorageSync('userInfo', userInfo)
    }
  },
  beforeDestroy() {
    // 移除事件监听
    uni.$off('updateUserInfo', this.updateUserInfo)
  },
  filters: {
    // 手机号脱敏处理
    getPhoneNum(phone) {
      if (!phone || phone === '暂未绑定') return '暂未绑定'
      return phone.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2')
    }
  }
}
</script>
<style lang="scss" scoped>
.my_info {
    height: 172rpx;
    width: 750rpx;
    background-color: #ffc200;
    display: flex;
    // 头像
    .head {
      width: 172rpx;
      height: 172rpx;
      margin: auto;
      text-align: center;
      .head_image {
        width: 116rpx;
        height: 116rpx;
        line-height: 172rpx;
        vertical-align: top;
        margin: 20rpx auto;
        border-radius: 50%;
        background-color: #fff;
      }
    }
    // 姓名电话号
    .phone_name {
      flex: 1;
      margin: auto;
      .name {
        .name_text {
          font-size: 32rpx;
          opacity: 1;
          font-family: PingFangSC, PingFangSC-Medium;
          font-weight: 550;
          text-align: left;
          color: #333333;
          height: 44rpx;
          line-height: 44rpx;
          margin-right: 12rpx;
        }

        .name_type {
          width: 32rpx;
          height: 32rpx;
          vertical-align: middle;
          margin-bottom: 6rpx;
        }
      }
      .phone {
        .phone_text {
          height: 40rpx;
          opacity: 1;
          font-size: 28rpx;
          font-family: PingFangSC, PingFangSC-Regular;
          font-weight: 400;
          text-align: left;
          color: #333333;
          line-height: 40rpx;
        }
      }
    }
  }
</style>